<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TestNG UI自动化测试报告</title>
    <!-- 商务风格美化：引入 Bootstrap、FontAwesome、Chart.js -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f1f3f6;
            color: #333;
            padding: 20px;
        }

        /* 页眉LOGO区，可自定义LOGO图片 */
        .header-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .header-logo img {
            height: 48px;
            margin-right: 12px;
        }

        h1, h2, h3 {
            text-align: center;
            color: #2c3e50;
            margin-top: 40px;
        }

        .timestamp {
            display: block;
            text-align: center;
            color: #777;
            font-size: 0.9em;
            margin-bottom: 30px;
        }

        .summary-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 40px;
        }

        table {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.2s;
        }

        table.table-hover tbody tr:hover {
            background-color: #f0f6ff;
        }

        th {
            background-color: #007BFF;
            color: white;
        }

        .status-icon.pass {
            color: green;
        }

        .status-icon.fail {
            color: red;
        }

        .status-icon.skip {
            color: gray;
        }

        .details {
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 100px;
            overflow-y: auto;
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
        }

        .footer {
            text-align: center;
            margin-top: 60px;
            color: #aaa;
            font-size: 0.9em;
        }

        .chart-container {
            width: 300px;
            height: 300px;
            margin: auto;
        }

        /* 响应式优化 */
        @media (max-width: 600px) {
            .summary-card, table {
                box-shadow: none;
            }

            .chart-container {
                width: 100% !important;
                height: auto !important;
            }
        }

        /* 失败高亮 */
        tr td .status-icon.fail, tr td .status-icon.fail + span {
            font-weight: bold;
            color: #d32f2f !important;
        }

        /* 异常信息折叠按钮样式 */
        .collapse-btn {
            color: #007BFF;
            cursor: pointer;
            text-decoration: underline;
            font-size: 0.95em;
        }
    </style>
</head>
<body>
<!-- 页眉LOGO区（如有LOGO可替换src） -->
<div class="header-logo">
    <!-- <img src="logo.png" alt="Logo"> -->
    <h1>TestNG UI自动化测试报告</h1>
</div>
<p class="timestamp">生成时间：${generationTime}</p>
<div class="summary-card">
    <canvas id="summaryChart" class="chart-container"></canvas>
    <table class="table table-bordered table-hover mt-4">
        <thead>
        <tr>
            <th>测试套件</th>
            <th>通过</th>
            <th>失败</th>
            <th>跳过</th>
            <th>总计</th>
        </tr>
        </thead>
        <tbody>
        <#list suites as suite>
            <tr>
                <td>${suite.name}</td>
                <td>${suite.passed}</td>
                <td>${suite.failed}</td>
                <td>${suite.skipped}</td>
                <td>${suite.total}</td>
            </tr>
        </#list>
        <tr style="font-weight:bold;">
            <td>总计</td>
            <td>${totalPassed}</td>
            <td>${totalFailed}</td>
            <td>${totalSkipped}</td>
            <td>${totalTests}</td>
        </tr>
        </tbody>
    </table>
</div>
<h2>详细结果</h2>
<#list suites as suite>
    <h3>🧪 ${suite.name}</h3>
    <#list suite.testClasses as testClass>
        <h4>📦 ${testClass.className}</h4>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>方法名</th>
                <th>状态</th>
                <th>开始时间</th>
                <th>耗时(ms)</th>
                <th>异常信息</th>
            </tr>
            </thead>
            <tbody>
            <#list testClass.results as result>
                <tr>
                    <td>${result.methodName}</td>
                    <td>
                        <i class="fas fa-circle status-icon ${result.status}"></i> <span>${result.statusText}</span>
                    </td>
                    <td>${result.startTime}</td>
                    <td>${result.duration}</td>
                    <td>
                        <#if result.exceptionMessage?? && result.exceptionMessage != "">
                            <span class="collapse-btn" onclick="toggleDetails(this)">点击展开/收起</span>
                            <div class="details" style="display:none;">${result.exceptionMessage}</div>
                        <#else>
                            <span class="details">无</span>
                        </#if>
                    </td>
                </tr>
            </#list>
            </tbody>
        </table>
    </#list>
</#list>
<div class="footer">&copy; 2025 Laker AutoTest Framework</div>
<script>
    // 饼图统计
    const ctx = document.getElementById('summaryChart').getContext('2d');
    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['通过', '失败', '跳过'],
            datasets: [{
                label: '测试用例分布',
                data: [${totalPassed}, ${totalFailed}, ${totalSkipped}],
                backgroundColor: [
                    'rgba(40, 167, 69, 0.7)',
                    'rgba(220, 53, 69, 0.7)',
                    'rgba(108, 117, 125, 0.7)'
                ],
                borderColor: [
                    'rgba(40, 167, 69, 1)',
                    'rgba(220, 53, 69, 1)',
                    'rgba(108, 117, 125, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '测试用例分布统计'
                }
            }
        }
    });

    // 异常信息折叠/展开
    function toggleDetails(btn) {
        var details = btn.nextElementSibling;
        if (details.style.display === 'none') {
            details.style.display = 'block';
            btn.textContent = '点击收起';
        } else {
            details.style.display = 'none';
            btn.textContent = '点击展开/收起';
        }
    }
</script>
</body>
</html>